<template>
	<div>
		<div><div id="container"></div></div>
	</div>
</template>

<script>
import { Chart } from '@antv/g2';
export default {
	data() {
		return {
			chart:null,
			// data: [
			// 	{ year: '1991', value: 3 },
			// 	{ year: '1992', value: 4 },
			// 	{ year: '1993', value: 3.5 },
			// 	{ year: '1994', value: 5 },
			// 	{ year: '1995', value: 4.9 },
			// 	{ year: '1996', value: 6 },
			// 	{ year: '1997', value: 7 },
			// 	{ year: '1998', value: 9 },
			// 	{ year: '1999', value: 13 }
			// ]
		};
	},
	props:{
		WHAttr:Object,
		data:Array
	},
	mounted() {
		this.getG2Line()
	},
	methods: {
		getG2Line() {
			this.chart = new Chart({
				container: 'container',
				// autoFit: true,
				width:this.WHAttr.width,
				height: this.WHAttr.height,
				// padding:this.WHAttr.padding
			});
			this.chart.data(this.data);
			this.chart.scale({
					time: {
						range: [0, 1],
					},
					// value: {
					// 	nice: true,
					// },
				});

			this.chart.tooltip({
				showCrosshairs: true, // 展示 Tooltip 辅助线
				shared: true,
				showMarkers: false
			});
			this.chart.legend({
					position:'left'
				})
			this.chart.axis('value', {
					label: {
						formatter: (val) => {
							return val;
						},
					},
				});
			this.chart
				.line()
				.position('time*value')
				.color('type',['#025DF4', '#DB6BCF', '#2498D1', '#4045B2'])
				.shape('smooth')
			this.chart
				.area()
				.position('time*value')
				.color('type',['#025DF4', '#DB6BCF', '#2498D1', '#4045B2'])
				.shape('smooth');

			this.chart.render();
		}
	}
};
</script>

<style></style>
